css-doodle {
    --rule: ( :doodle {
            position: absolute;
            width: 100%;
            @grid: 10 / 101% 100vh;
            left: 0;
            top: 0;
            z-index: 1;
            overflow: hidden;
        }

        animation: bounce linear @r(7s, 15s) @r(-1s, -5s) infinite;
        opacity: @r(0.3, 1);
        @place-cell: @r(100%) @r(100%);

        @random(.3) {
            :after {
                content: '🍭';
                position: absolute;
                font-size: @r(25px, 35px);
                transform: rotate(@r(360deg));
            }
        }

        @random(.2) {
            :after {
                content: '🍫';
                position: absolute;
                @place-cell: @r(100%) @r(100%);
                font-size: @r(15px, 25px);
                z-index: @p(1, 2);
                transform: rotate(@r(360deg));
            }
        }

        @random(.2) {
            :before {
                content: '🧁';
                position: absolute;
                @place-cell: @r(100%) @r(100%);
                font-size: @r(15px, 25px);
                z-index: @p(1, 2);
                transform: rotate(@r(360deg));
            }
        }

        @random(.2) {
            :before {
                content: '🍪';
                position: absolute;
                @place-cell: @r(100%) @r(100%);
                font-size: @r(15px, 25px);
                z-index: @p(1, 2);
                transform: rotate(@r(360deg));
            }
        }

        @keyframes bounce {
            0% {
                transform: translateY(@r(-101vh, -110vh));
            }

            100% {
                transform: translateY(@r(101vh, 110vh));
            }
        }

    );
}